import { lazy, Suspense } from 'react';
import { Route, Routes } from 'react-router-dom';
import './App.css';

const Home = lazy(() => import("./pages/home"))
const Expenses = lazy(() => import('./pages/expenses'))
const Invoices = lazy(() => import('./pages/invoices'))
const Invoice = lazy(() => import('./pages/invoice'))

function App() {
  return (
    <>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path="expenses" element={<Expenses />} />
          <Route path="invoices" element={<Invoices />}>
            <Route
              index
              element={
                <main style={{ padding: "1rem" }}>
                  <p>Select an invoice</p>
                </main>
              }
            />
            <Route path=':invoiceId' element={<Invoice />} />
          </Route>
          <Route 
            path='*'
            element={(
              <main style={{ padding: '1rem' }}>
                <p>There's nothing here!</p>
              </main>
            )}  
          />
        </Routes>
      </Suspense>
    </>
  );
}

export default App
